<template>
  <div class="configure-server">
    <a-card :bordered="false" class="sure-info">
      <div class="title">
        <div class="title_logo"></div>
        <div class="title_content">确认配置信息</div>
      </div>
      <div class="content">
        <div class="content_header">配置详情</div>
        <div class="content_main">
          <div class="content_main_item">
            <div class="content_main_item_index">站点：</div>
            <div class="content_main_item_main">{{ stationTab && stationTab.name ? stationTab.name : '' }}</div>
          </div>
          <div class="content_main_item">
            <div class="content_main_item_index">参数规格：</div>
            <div class="content_main_item_main">
              {{ configureBase && configureBase.gpuProductName ? configureBase.gpuProductName : ' ' }} ({{
                configureBase && configureBase.cpuSize ? configureBase.cpuSize : ' '
              }}CPU, {{ configureBase && configureBase.memorySize ? configureBase.memorySize : ' ' }}GB内存)
            </div>
          </div>
          <div class="content_main_item">
            <div class="content_main_item_index">镜像：</div>
            <div class="content_main_item_main">
              {{ sysImageType.name ? sysImageType.name : '' }} {{ sysImageVersion.name ? sysImageVersion.name : '' }}
            </div>
          </div>
          <div class="content_main_item">
            <div class="content_main_item_index">系统盘：</div>
            <div class="content_main_item_main">
              {{ storageType.name ? storageType.name : '' }} 容量{{ storageSize ? storageSize + 'G' : '' }}
            </div>
          </div>
          <div class="content_main_item">
            <div class="content_main_item_index">弹性IP：</div>
            <div class="content_main_item_main">{{ flexibleIp ? `公网IP（ ${flexibleIp}M )` : '' }}</div>
          </div>
        </div>
      </div>
    </a-card>
    <a-card :bordered="false" class="order-info">
      <div class="title">
        <div class="title_logo"></div>
        <div class="title_content">确认订单信息</div>
      </div>
      <div class="content">
        <div class="content_header">
          <div class="content_header_item">产品</div>
          <div class="content_header_item">服务器数量</div>
          <div class="content_header_item">付费类型</div>
          <div v-if="tabKey === 'monthTab'" class="content_header_item">时长</div>
          <div class="content_header_item">总计费用</div>
        </div>
        <div class="content_main">
          <div class="content_main_item">
            {{ productName ? productName : '' }}
          </div>
          <div class="content_main_item">
            {{ serverNum ? serverNum + '台' : '' }}
          </div>
          <div class="content_main_item">
            {{ tabKey === 'monthTab' ? '包年包月' : '按量计费' }}
          </div>
          <div v-if="tabKey === 'monthTab'" class="content_main_item">
            {{ timeNum ? timeNum + '个月' : '' }}
          </div>
          <div class="content_main_item">
            <span>
              {{ moneyCount !== undefined ? moneyCount + '算力豆' : '' }}
            </span>
            <a-popover class="content_main_popover">
              <template slot="title">
                <div
                  style="width: 240px; font-size: 14px; display: flex; justify-content: space-between; color: #333333;"
                >
                  <div style="width: 140px">计费项</div>
                  <div style="width: 100px">价格</div>
                </div>
              </template>
              <template slot="content">
                <div
                  style="width: 240px; font-size: 12px; display: flex; justify-content: space-between; color: rgba(51, 51, 51, 0.8);padding-bottom: 12px; border-bottom: 1px solid #e6edf5;"
                >
                  <div style="width: 140px">规格配置费用</div>
                  <div style="width: 100px">{{ specFee }}算力豆</div>
                </div>
                <div
                  style="width: 240px; font-size: 12px; display: flex; justify-content: space-between; color: rgba(51, 51, 51, 0.8);padding: 12px 0; border-bottom: 1px solid #e6edf5;"
                >
                  <div style="width: 140px">存储费用</div>
                  <div style="width: 100px">{{ storageCount }}算力豆</div>
                </div>
                <div
                  v-if="broadbandCount"
                  style="width: 240px; font-size: 12px; display: flex; justify-content: space-between; color: rgba(51, 51, 51, 0.8);padding: 12px 0; border-bottom: 1px solid #e6edf5;"
                >
                  <div style="width: 140px">宽带费用</div>
                  <div style="width: 100px">{{ broadbandCount }}算力豆</div>
                </div>
                <div
                  style="width: 240px; font-size: 14px; display: flex; justify-content: space-between; padding: 12px 0; color: #333333;"
                >
                  <div style="width: 140px">合计费用</div>
                  <div style="width: 100px">{{ moneyCount }}算力豆</div>
                </div>
              </template>
              <span class="content_main_item_popover_explain">
                明细
              </span>
            </a-popover>
          </div>
        </div>
      </div>
    </a-card>
    <a-card :bordered="false" class="check-info">
      <div class="title">
        <div class="title_logo"></div>
        <div class="title_content">服务协议</div>
      </div>
      <div class="content">
        <div class="content_header">
          <div class="content_header_index">
            <a-checkbox @change="checkServerNotify"> </a-checkbox>
          </div>
          <div class="content_header_about">《信息高铁GPU云服务器服务条款》</div>
          <warn-alter :style="{ display: dispalyWarnCheck ? 'block' : 'none' }" :marginLeft="4">
            <template slot="extra">您必须先认真阅读相关服务协议，并同意</template>
          </warn-alter>
        </div>
        <div class="content_more">
          <span class="content_more_explain">退款规则及操作说明</span>
          <span class="content_more_notice">购买须知</span>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import WarnAlter from '../../WarnAlter'
export default {
  name: 'SureConfigure',
  components: {
    WarnAlter
  },
  props: {
    tabKey: {
      type: String,
      default: null
    },
    // stationList里面的item，站点名称为item.name
    stationTab: {
      type: Object,
      default: null
    },
    // 规格配置，是选中的item对象，包含名称、GPU等
    configureBase: {
      type: Object,
      default: null
    },
    sysImageType: {
      type: Object,
      default: null
    },
    sysImageVersion: {
      type: Object,
      default: null
    },
    storageType: {
      type: Object,
      default: null
    },
    storageSize: {
      type: [String, Number],
      default: null
    },
    flexibleIp: {
      type: [String, Number],
      default: null
    },
    productName: {
      type: String,
      default: null
    },
    serverNum: {
      type: [String, Number],
      default: null
    },
    timeNum: {
      type: [String, Number],
      default: null
    },
    broadbandCount: {
      type: [String, Number],
      default: 0
    },
    baseCount: {
      type: [String, Number],
      default: 0
    },
    specFee: {
      type: [String, Number],
      default: 0
    },
    storageCount: {
      type: [String, Number],
      default: 0
    },
    moneyCount: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      checked: false,
      dispalyWarnCheck: false
    }
  },
  methods: {
    checkServerNotify(e) {
      this.checked = e.target.checked
      this.dispalyWarnCheck = !e.target.checked
    }
  }
}
</script>

<style lang="less" scoped>
.configure-server {
  width: 100%;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
  /deep/.ant-card-body {
    padding: 30px;
    margin-bottom: 8px;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .title_logo {
      width: 6px;
      height: 6px;
      background-color: #33b0ed;
      border-radius: 50%;
      margin-right: 18px;
    }
    .title_content {
      height: 16px;
      font-size: 16px;
      line-height: 16px;
    }
  }
  .sure-info {
    .content {
      width: 850px;
      border-radius: 2px;
      border: solid 1px #e1e5ee;
      margin-top: 20px;
      .content_header {
        height: 45px;
        background-color: #f6f8fd;
        line-height: 45px;
        font-size: 14px;
        padding-left: 24px;
      }
      .content_main {
        padding: 20px 24px 4px 24px;
        font-size: 12px;
        .content_main_item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 14px;
          .content_main_item_index {
            width: 83px;
          }
          .content_main_item_main {
            margin-left: 10px;
          }
        }
      }
    }
  }
  .order-info {
    .content {
      width: 850px;
      border-radius: 2px;
      border: solid 1px #e1e5ee;
      margin-top: 20px;
      .content_header {
        height: 45px;
        background-color: #f6f8fd;
        line-height: 45px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .content_header_item {
          width: 20%;
          padding-left: 24px;
        }
      }
      .content_main {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 20px 0;
        .content_main_item {
          width: 20%;
          padding-left: 24px;
          .content_main_item_popover_explain {
            font-size: 12px;
            color: #33b0ed;
          }
          .content_main_item_popover_explain:hover {
            cursor: default;
          }
        }
      }
    }
  }
  .check-info {
    .content {
      margin-left: 12px;
      .content_header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 21px;
        .content_header_index {
          margin-right: 10px;
        }
        .content_header_about {
          width: 194px;
          height: 12px;
          font-size: 12px;
          line-height: 12px;
          text-align: center;
          color: #33b0ed;
        }
        .content_header_about:hover {
          cursor: pointer;
        }
      }
      .content_more {
        margin: 10px 0 0 28px;
        color: #33b0ed;
        font-size: 12px;
        .content_more_explain {
          text-decoration: underline;
          margin-right: 28px;
        }
        .content_more_explain:hover {
          cursor: pointer;
        }
        .content_more_notice:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
